<template>
    <VcTable 
    ref="CustomTableRef"
     :columns="columns"
     :loading="loading"
     :operation-column="operationColumn"
     :data="tableData"
     @handle-operation="handleOperation">
    </VcTable>
</template>
  
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTableList } from '@/api/index'
import useTable, { type OperationFun } from '@/hooks/useTable'

// 操作列表配置
const operationColumn = {
    'label': '操作',
    'width': 180,
    'fixed': 'right',
    // 用于操作列表数据配置
    btns: [
        {
            // 操作事件名称
            label: '修改',
            // 图标：结合element-plus图标使用
            icon: 'Edit',
            // 操作类型（handle-operation中的回调数据会包含这部分数据，业务侧根据该类型数据实现自己的逻辑操作）
            type: 'edit',
            // 风格参考el-button type风格
            style: 'primary',
        },
        {
            label: '删除',
            icon: 'Delete',
            type: 'del',
            style: 'danger'
        },
    ]
}
const delFun = (data: any) => {
    ElMessageBox.confirm(
        `确定删除数据${data.name}?`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            loadTableData()
        })
}
const operationFun: OperationFun = (_type, _data) => {
    switch (_type) {
        case 'del':
            delFun(_data);
            break;
        case 'edit':
            ElMessage({
                type: 'info',
                message: '你点击了修改按钮',
            })
            break;
    }
}
const columns = [
    {
        'prop': 'startDate',
        'label': '开始时间'
    },
    {
        'prop': 'endDate',
        'label': '结束时间',
    },
    {
        'prop': 'name',
        'label': '姓名',
    },
    {
        'label': '国家',
        'prop': 'city',
    },
    {
        'label': '城市',
        'prop': 'state',
    },
    {
        'label': '地址',
        'prop': 'address',
    },
    {
        'label': 'zip',
        'prop': 'zip',
    }
]
const {
    tableData,
    loading,
    handleOperation,
    loadTableData,
} = useTable({ tableApi: getTableList , operation: operationFun});
</script>